<!--  -->
<template>
  <div id='compage'>
    <a-row>
      <a-col :span="24">
      <div style="margin-bottom: 10px;">
        <a-space>
        <a-input-search placeholder="输入用户名或邮箱" v-model="searchName" style="width: 200px" @search="onSearch" />
        <a-input-search placeholder="请输入用户名" style="width: 260px;" v-model="postusername" @search="postUser">
        <a-button slot="enterButton" type="primary">
          新增用户
        </a-button>
      </a-input-search>
    </a-space>
      </div>
      <a-table
          bordered
          :columns="columns"
          :row-key="record => record.id"
          :data-source="cusTableList"
        >
        <template slot="active" slot-scope="active,list">
          <a-switch v-if="active == 1" default-checked @click="changeActiveStatus(list.id, 0)" />
          <a-switch v-else @click="changeActiveStatus(list.id, 1)"/>
        </template>
        <template slot="action" slot-scope="id,list">
          <a-space>
            <a-button type="primary" @click="goShDialog(id,list)">修改密码</a-button>
            <a-button type="danger" @click="removeUser(id)">删除用户</a-button>
          </a-space>
        </template>
      </a-table>
      </a-col>
    </a-row>
    <a-modal
      title="修改信息"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      @ok="handleOk"
      @cancel="handleCancel"
      centered
    >
    <a-form-model :model="form">
    <a-form-model-item label="密码">
      <a-input v-model="form.password" />
    </a-form-model-item>
  </a-form-model>
    </a-modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { cguser, cgpassword, getAdminUserInfo, postAdminUserInfo, deleteUser } from '@/api/webapi.js'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px'
  },
  {
    title: '账号',
    dataIndex: 'username'
  },
  {
    title: '邮箱',
    dataIndex: 'email'
  },
  {
    title: '是否启用',
    dataIndex: 'active',
    scopedSlots: { customRender: 'active' }
  },
  {
    title: '操作',
    dataIndex: 'id',
    scopedSlots: { customRender: 'action' },
    width: '300px'
  }
]
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      postusername: '',
      searchName: '',
      shcuuentid: null,
      visible: false,
      columns,
      show: true,
      cusTableList: [],
      allClick: 0,
      form: {
        password: ''
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    postUser () {
      if (this.postusername === '') {
        return this.$message.error('用户名不能为空')
      }
      const obj = {
        username: this.postusername
      }
      postAdminUserInfo(obj).then((res) => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.loadCanvas()
          this.postusername = ''
        } else {
          this.$message.error(res.data.error)
        }
      })
    },
    removeUser  (id) {
      deleteUser(id).then((res) => {
        if (res.code === 200) {
          this.loadCanvas()
        }
      })
    },
    goShDialog (id, list) {
      this.shcuuentid = id
      this.visible = true
    },
    onSearch () {
      this.loadCanvas()
    },
    handleOk () {
      if (this.form.password === '') {
        return this.$message.error('密码不能为空')
      } else {
        const obj = {
          new_password: this.form.password,
          old_password: 'admin no write'

        }
        cgpassword(this.shcuuentid, obj).then((res) => {
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.loadCanvas()
            this.visible = false
          } else {
            this.$message.error('错误')
          }
        })
      }
    },
    handleCancel () {
      this.visible = false
    },
    changeActiveStatus (id, code) {
      const obj = {
        active: code
      }
      cguser(id, obj).then((res) => {
        if (res.code === 200) {
          this.loadCanvas()
        } else {
          this.$message.error('切换失败')
        }
      })
    },
    async loadCanvas () {
      let obj
      if (this.searchName === '') {
        obj = {}
      } else {
        obj = {
          searchName: this.searchName
        }
      }
      await getAdminUserInfo(obj).then((res) => {
        if (res.code === 200) {
          this.cusTableList = res.data.list
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.loadCanvas()
    const that = this
    window.onresize = function () {
      that.resizeCanvas()
    }
  }
}
</script>
<style lang='less' scoped>
body,html{
background: #0f375f;
}
#compage{
width: 100%;
height: 100%;
}
.fatherCanvas{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
#main{
}
.tbimg{
width: 32px;
height: 45px;
}
</style>
